<template>
    <div>
        <el-dialog
    class="dialog"
    v-model="dialogVisible"
    title="查看订单详情"
    width="35%"
    top="3vh"
    :before-close="handleClose"
  >
  <el-form  :model="orderInfoForm" label-width="110px" ref="orderInfoFormRef">
    <el-form-item label="商品名称" prop="flowerName">
        <el-input  v-model="orderInfoForm.flowerName" :disabled="true" ></el-input>
    </el-form-item>
    <el-form-item label="商品类型" prop="type">
        <el-input  v-model="orderInfoForm.type" :disabled="true" ></el-input>
    </el-form-item>
    <el-form-item label="商品价钱" prop="price">
        <el-input  
          v-model="orderInfoForm.price"  :disabled="true" 
        ></el-input>
    </el-form-item>
    <el-form-item label="购买数量" prop="salesVolumes">
        <el-input  v-model="orderInfoForm.salesVolumes"  :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="收货人姓名" prop="addressInfoName">
        <el-input  v-model="orderInfoForm.addressInfoName"  :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="收货人手机号" prop="addressInfoPhone">
        <el-input  v-model="orderInfoForm.addressInfoPhone"  :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="收货人地址" prop="addressInfoAddress">
        <el-input  v-model="orderInfoForm.addressInfoAddress"  :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="购买者用户名" prop="username">
        <el-input  v-model="orderInfoForm.username"  :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="购买者留言" prop="message">
        <el-input  v-model="orderInfoForm.message"  :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="购买时间" prop="orderTime">
        <el-input  v-model="orderInfoForm.orderTime" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="订单状态" prop="status">
        <el-select 
            v-model="orderInfoForm.status" 
            placeholder="您可修改订单状态" 
            style="width: 100%;">
            <el-option label="未发货" :value=Number(0)  />
            <el-option label="已发货" :value=Number(1) />
            <el-option label="已签收" :value=Number(2) />
      </el-select>
    </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancle">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
</template>

<script setup>
import { defineProps ,defineEmits,reactive,ref,onMounted} from 'vue';
import dayjs from 'dayjs'
// 接收父组件传值
const props = defineProps({
    dialogVisible:false, // 是否展示
    orderFormInitial:{} //弹框默认信息
})
// 子传父的方法
const emits = defineEmits(['dialogShow','Confirm'])
// 弹框表单信息
const orderInfoForm = reactive({
  flowerName: '',
  type:'',
  price: '',
  salesVolumes:'',
  username:'',
  addressInfoName:'',
  addressInfoPhone:'',
  addressInfoAddress:'',
  message:'',
  orderTime:'',
  status:'',
  _id:''
})
// 对时间戳样式进行转换
const getData = (n) =>{
  return dayjs(n).format('YYYY-MM-DD HH:mm:ss')
}
//创建ref
const orderInfoFormRef = ref()
// 点击关闭的回调函数
const handleClose = () => {
    emits('dialogShow',false)
}
// 点击取消的函数
const handleCancle = () =>{
    emits('dialogShow',false)
}
// 点击确认的函数
const handleConfirm = () =>{
    // 向父组件中传值
    emits('dialogShow',false)
    emits('Confirm',orderInfoForm)
    
}
onMounted(async()=>{
    // flowerForm = props.flowerFormInitial
    // 将信息进行赋值
    orderInfoForm.flowerName = props.orderFormInitial.flowerName
    orderInfoForm.type = props.orderFormInitial.type
    orderInfoForm.price = props.orderFormInitial.price
    orderInfoForm.salesVolumes = props.orderFormInitial.salesVolumes
    orderInfoForm.username = props.orderFormInitial.userInfo.username
    orderInfoForm.addressInfoName = props.orderFormInitial.addressInfo.name
    orderInfoForm.addressInfoPhone = props.orderFormInitial.addressInfo.iphone
    orderInfoForm.addressInfoAddress = props.orderFormInitial.addressInfo.address
    orderInfoForm.message = props.orderFormInitial.message
    orderInfoForm.orderTime = getData(props.orderFormInitial.orderTime)
    orderInfoForm.status = props.orderFormInitial.status
    orderInfoForm._id = props.orderFormInitial._id
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog){
    border-radius: 15px;
}
:deep(.el-form){
    padding-right: 70px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
:deep(.el-upload) {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>